<template>
  <div class="my-approval search-list-container searchHeight">
    <approve-detail :type="detail.status == 7 ? 1 : 4" :detail="detail" v-if="isShowDetail"
      @handleCancelDetail="handleCancelDetail"></approve-detail>
    <template v-else>
      <div class="search-wrapper">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto">
          <el-form-item label="审批状态" prop="status">
            <el-select v-model="approvalStatus" placeholder="请选择" @change="changeStatus">
              <el-option v-for="item in approvalStatusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程名称" prop="definitionName">
            <el-input v-model="queryParams.definitionName" placeholder="请输入流程名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form>
      </div>
      <div class="list-wrapper">
        <el-table ref="tables" width="100%" height="100%" v-loading="loading" :data="approvalList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="审批状态" align="center" prop="statusToString">
          </el-table-column>
          <el-table-column label="流程名称" align="center" prop="processInstanceName" width="250"
            :show-overflow-tooltip="true" />
          <el-table-column label="发起人" align="center" prop="initiator">
          </el-table-column>
          <el-table-column label="申请时间" align="center" prop="startDate" />
          <el-table-column label="审批节点" align="center" prop="taskName" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['alarm:deviceRule:edit']" v-if="approvalStatus == '0'">办理</el-button>
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)"
                v-hasPermi="['monitor:operlog:query']" v-else>详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getUserTaskPageList" />
      </div>
    </template>
  </div>
</template>

<script>
import {
  getUserTaskPageList,
  getUserHistoryTaskList,
} from "@/api/internalApproval/myApproval.js";
import ApproveDetail from "./approveDetail";
export default {
  data() {
    return {
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      approvalStatusList: [
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "1",
          label: "已完成",
        },
      ], // 审批状态列表
      approvalStatus: "0",
      approvalList: [],
      loading: false,
      isShowDetail: false,
      detail: {},
    };
  },
  components: {
    ApproveDetail,
  },
  methods: {
    handleView(row) {
      this.detail = row;
      this.isShowDetail = true;
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime = this.dateRange ? this.dateRange[0] : "";
      this.queryParams.endTime = this.dateRange ? this.dateRange[1] : "";
      this.getUserTaskPageList();
    },
    resetQuery() {
      this.dateRange = '';
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleUpdate(row) {
      this.detail = row;
      this.isShowDetail = true;
    },
    handleCancelDetail() {
      this.isShowDetail = false;
      this.getUserTaskPageList();
    },
    changeStatus() {
      this.getUserTaskPageList();
    },
    // 获取待办任务列表
    async getUserTaskPageList() {
      this.loading = true;
      let methods =
        this.approvalStatus == "0"
          ? getUserTaskPageList
          : getUserHistoryTaskList;
      const result = await methods({
        ...this.queryParams,
      });
      this.approvalList = result.data.list;
      this.total = result.data.total;
      this.loading = false;
    },
  },
  mounted() {
    this.getUserTaskPageList();
  },
};
</script>

<style lang="scss" scoped>
.my-approval {}

.searchHeight {
  height: calc(100% - 54px) !important;
}
</style>